<template>
  <div>
    <box title="最近巡检">
      <div class="h-full flex flex-col px-[16px]">
        <!-- list -->
        <div class="flex-1">
          <div v-if="tableData.data.length != 0" class="pt-[16px]">
            <div class="w-[100%]  py-[16px]  pl-[16px] h-[142px] mb-[16px] cursor-pointer listbgc"
              v-for="(item, index) in tableData.data" @click="active = item.id">
              <div class="flex justify-between">
                <div class="max-w-[200px]">
                <div class="text-[16px] leading-[16px] h-[16px] relative text-ellipsis line-clamp-1 break-all " 
                style="border-bottom: 3px solid rgba(69,131,255,0.5) ; ">
                  {{ isNullOrEmpty(item.missionName) }}
                  <!-- <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF]"></div> -->
                </div>
              </div>
                <div class="w-[70px] h-[32px] flex justify-center text-[16px] items-center "
                  :class="item.status == 1 ? 'listbg' : item.status == 2 ? 'listbg1' : ''">

                  {{ isNullOrEmpty(PREJECTALARMTYPES[item.status]?.label ? PREJECTALARMTYPES[item.status]?.label : '正常'
                  ) }}
                </div>
              </div>
              <div class="flex mt-[5px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">巡检点位</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.points) }}</div>
              </div>
              <div class="flex mt-[16px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">巡检人员</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{
                  isNullOrEmpty(item.inspectionUser.map(item => item.nickname).join(',')) }}
                </div>
              </div>
              <div class="flex mt-[16px] gap-[22px]">
                <div class="text-[14px] text-[#D6D6D6]">巡检时间</div>
                <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.updatedAt) }}</div>
              </div>
            </div>

          </div>
          <nullpng v-else />
        </div>
        <!-- 分页 -->
        <div class="h-[59px] w-[100%] pr-[16px] flex justify-center items-center">
          <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
            :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
            style="color: #fff;" @current-change="getTableList" :pager-count="3"/>
        </div>
      </div>
    </box>
  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { screenprejectinspects } from "@/api/screen/largeData";
import { PAGE_LAYOUTLEFTS } from "@/constant";
import { PREJECTALARMTYPES } from "@/constant/alarm-mangenment";
import box from '@/views/large-data-screen/component/box.vue'
const isactive = ref(0)
const active = ref(1)
const list = ref([
  {
    name: '水泵',
    id: 1,
    status: 1,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },
  {
    name: '水泵',
    id: 2,
    status: 2,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },
  {
    name: '水泵',
    id: 3,
    status: 2,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },
  // {
  //   name: '水泵',
  //   id: 3,
  //   status: 2,
  //   num: 'NO54125',
  //   info: '电压过高（UA-123）',
  //   location: '教学楼2栋3单元'
  // },

])
const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  page: 1,
  limit: 3
});
onMounted(() => {
  getTableList()// 获取表格数据
})

const getTableList = () => {
  screenprejectinspects(searchFrom.value).then(res => {
    tableData.data = res.result.data
    tableData.total = res.result.total
  })
  // 获取表格数据
}
</script>
<style lang="scss" scoped>
.listbg {
    background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(37, 176, 19, 1);
    border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
    background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(240, 50, 50, 1);
    border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbgc {
  background: rgba($color: #25293B, $alpha: 0.6);
  // opacity: 0.6;
  border-image: linear-gradient(0deg, #4583FF, #0B3556) 10 10;
}
</style>
